<%@ page import="com.dao.CateDao" %>
<%@ page import="java.util.List" %>
<%@ page import="com.beans.CateInfo" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/edittable.css"/>
    <link rel="stylesheet" type="text/css" href="css/validate.css"/>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script>
        $(function () {
            $("#bigcateId").change(function () {
                if (this.value != -1) {
                    $("#bigcateId_msg").removeClass().addClass("validate_ok").html("✓");
                } else {
                    $("#bigcateId_msg").removeClass().addClass("validate_error").html("请选择一级分类");
                }
            });

            //验证分类名
            function validateCateName() {
                var result = true;
                var reg = /^\S{2,20}$/;   //2-20个合法字符(非空白)
                var cateName = $("#cateName").val();
                if (!reg.test(cateName)) {
                    result = false;
                    $("#cateName_msg").removeClass().addClass("validate_error").html("分类名称不合法");
                }
                if (result == true) {
                    $("#cateName_msg").removeClass().addClass("validate_ok").html("✓");
                }
                return result;
            }

            $("#cateName").focus(function () {
                $("#cateName_msg").removeClass().addClass("validate_info").html("长度2-20位");
            }).blur(function () {
                validateCateName();
            });
            //总验证
            $("#form_btn").click(function () {
                var result=true;
                if(validateCateName()==false){
                    result=false;
                }
                if($("#bigcateId").val()=="-1"){
                    result=false;
                    $("#bigcateId_msg").removeClass().addClass("validate_error").html("请选择一级分类");
                }
                if(result==true){
                    result=confirm('确定提交吗');
                }
                return result;
            });
        });
    </script>
</head>
<body>
<%
    CateDao cateDao = new CateDao();
    List<CateInfo> cateList = cateDao.getCateList(0);
    request.setAttribute("cateList", cateList);
%>
<div class="div_title">
    <div class="div_titlename"><img src="images/san_jiao.gif"><span>添加二级分类</span></div>
</div>
<form action="CateServlet.do" method="post">
    <input type="hidden" name="flag" value="addSmallCate">
    <table class="edit_table">
        <tr>
            <td class="td_info">父级分类:</td>
            <td class="td_input_short">
                <select class="txtbox" name="bigcateId" id="bigcateId">
                    <option value="-1">---请选择所属一级分类---</option>
                    <c:forEach var="cate" items="${cateList}">
                        <option
                                <c:if test="${cate.id==param.bigcateId}">selected</c:if>
                                value="${cate.id}">${cate.cateName}</option>
                    </c:forEach>
                </select>
            </td>
            <td>
                <label class="validate_info" id="bigcateId_msg">长度 2-20 位非空白字符</label>
            </td>
        </tr>

        <tr>
            <td class="td_info">分类名称:</td>
            <td class="td_input_short">
                <input type="text" class="txtbox" id="cateName" name="cateName" value="${param.cateName}"/>
            </td>
            <td>
                <label class="validate_info" id="cateName_msg">长度 2-20 位非空白字符</label>
            </td>
        </tr>


        <tr>
            <td class="td_info">分类描述:</td>
            <td class="td_input_short"><textarea rows="4" cols="27" name="des" class="txtarea"></textarea></td>
            <td><label></label></td>
        </tr>
        <tr>
            <td class="td_info"></td>
            <td class="td_input_short">
                <input class="form_btn" type="submit" id="form_btn" value="提交"/>
                <input type="reset" class="form_btn" value="重置"/></td>
            <td>
                <label id="result_msg" class="result_msg">${msg}</label>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
